<template>
	<view class="viewbox auto p-top20 " v-if="pageShow">
		<scroll-view scroll-x="true"  class="scrollBox nowrap "
		            v-if="current == 0 && pageData.length">
			</block>
			<block v-for="(item,index) in pageData" :key="index">
				<view class="d-inline-block  scollList" 
					 :class="num == index?'white size32':'color_7e size30'"
					 @click="num = index">{{item.name}}
				</view>
			</block>
		</scroll-view>
		<block v-if="pageData[num].goods">	
			<view class="row j-sb p-left10 p-right10 m-top30" 
			     v-if="pageData[num].goods && pageData[num].goods.length">
				<view class="list bg28 bor_radius_20 p-bot20 m-bot20" 
				      v-for="(item,index) in pageData[num].goods" :key="index"
					  @click="toUrl(`/pages/user/myArtDetail?goodsId=${item.id}`)">
					<view class="listImg flexac">
						<image :src="item.goods_image" mode="aspectFit"></image>
					</view>
					<view class="row p-left10 p-right10">
						<view class="rows white ellipsis size26 m-top20">{{item.goods_name}}</view>
						<view class="toKenNum d-flex a-center m-top14">
							 <view class="tokenOn flexac">
								 <image src="../../static/imgs/bg02.png" class="tokenIcon"></image>
							 </view>
							 <view class="tonum  ellipsis p-left50  white h7 ">
							 {{item.token_id}}#{{item.number}}/{{item.stock}}
							</view>
						</view>
					
						<view class="rows white ellipsis size26 m-top20">{{item.creator}}</view>
					</view>
					
					
				</view>
			</view>
		</block>
		
		<empty v-else></empty>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageShow:false,
				pageData:[],
				current:0,
				num:0,
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				this.$http.post('order/collectionList', {
					is_send: 1
				}).then(res => {
					this.pageShow = true;
					if (res.code == 401) return;
					if (res.code != 1) return this.$Toast(res.msg);
					let info = res.data;
					let all = {
						name:'全部',
						goods:[],
					}
					
					info.forEach((item,index)=>{
						if(item.goods && item.goods.length) all.goods = all.goods.concat(item.goods)
					})
					info.unshift(all);
					this.pageData = info;
					
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #1e201f;
	}
</style>
<style lang="scss" scoped>
	.list {
		width: 300rpx;
	}
	
	.listImg {
		width: 100%;
		height: 300rpx;
	}
	.scrollBox{
		width:100%;
		height: 60rpx;
		line-height: 60rpx;
	}
	.scollList{
		margin-right: 30rpx;
	}
	.scollList:last-child{
		margin-right: 0;
	}
	.toKenNum{
		width:100%;
		height: 50rpx;
		position: relative;
	}
	.tokenOn{
		width:50rpx;
		height: 50rpx;
		background-image: url(@/static/imgs/bg01.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		z-index:10;
	}
	.tokenIcon{
		width:30rpx;
		height: 24rpx;
	}
	.tonum{
		width: 90%;
		height: 44rpx;
		line-height: 44rpx;
		background-color: #eab855;
		margin-left:-40rpx;
		border-radius: 22rpx;
	}
</style>
